<template>
  <div class="carModels">
    <div class="container">
      <!-- 顶部搜索框 -->
      <div class="top">
        <el-row type="flex" align="middle">
          <span>车辆类型：</span>
          <el-select v-model="truckTypeId" placeholder="请选择车辆类型">
            <el-option
              v-for="item in truckTypeIdList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <span>车牌号码：</span>
          <el-input
            v-model="licensePlate"
            placeholder="请输入车牌号码"
            clearable
            style="width: 200px"
          />
          <el-button
            type="primary"
            size="mini"
            @click="btnSearch"
          >搜索</el-button>
          <el-button size="mini" @click="reset">重置</el-button>
        </el-row>
      </div>
    </div>
    <div class="container">
      <div class="middle">
        <el-button @click="all">全部{{ total }}</el-button>
        <el-button @click="workingTrucks(1)">可用{{ workNum }}</el-button>
        <el-button @click="unWorkingTrucks(0)">停用{{ stopNum }}</el-button>
      </div>
    </div>
    <div class="container">
      <div class="table">
        <el-button type="primary" size="small" @click="add">新增车辆</el-button>
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" label="序号" :index="indexMethod" />
          <el-table-column prop="licensePlate" label="车牌号码" />
          <el-table-column prop="truckTypeName" label="车辆类型" />
          <el-table-column prop="driverNum" label="司机数量" />
          <el-table-column prop="workStatus" label="车辆状态">
            <template v-slot="{ row }">
              <span>{{
                row.workStatus === 0
                  ? "停用"
                  : row.workStatus === 1
                    ? "可用"
                    : "--"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="deviceGpsId" label="GPS设备id" />
          <el-table-column prop="allowableLoad" label="实载重量" />
          <el-table-column prop="allowableVolume" label="实载体积" />
          <el-table-column label="操作" width="300">
            <template v-slot="{ row }">
              <el-button
                type="text"
                style="color: blue"
                @click="$router.push(`/transit/vehicle-detail/${row.id}`)"
              >查看详情</el-button>
              | <el-button type="text" @click="stop(row.id)">停用</el-button> |
              <el-button
                type="text"
                style="color: blue"
                @click="update(row.id)"
              >配置司机</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <el-pagination
          :current-page="tableParams.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="tableParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          style="text-align: center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <div class="container">
      <!-- 放置弹层 -->
      <el-dialog
        title="新增车辆"
        :visible.sync="showDialog"
        :before-close="close"
      >
        <el-form
          ref="modelForm"
          :model="modelForm"
          style="padding: 10px 30px"
          label-width="100px"
          label-position="left"
          :rules="rules"
        >
          <el-form-item label="车辆类型" prop="truckTypeId">
            <el-select v-model="modelForm.truckTypeId" placeholder="请选择车辆类型">
              <el-option
                v-for="item in truckTypeIdList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="车牌号码" prop="licensePlate">
            <el-input
              v-model="modelForm.licensePlate"
              placeholder="请输入车牌号码"
            />
          </el-form-item>
          <el-form-item label="GPS设备ID" prop="deviceGpsId">
            <el-input
              v-model="modelForm.deviceGpsId"
              placeholder="请输入GPS设备ID"
            />
            <el-form-item style="text-align: center;margin-top: 20px;">
              <el-button @click="close">取 消</el-button>
              <el-button type="primary" @click="confirm">确 定</el-button>
            </el-form-item>
          </el-form-item></el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { calItemNum } from '@/utils/page'
import { getVehicleList, getTruckTypeIdList, getCount, addVehicle } from '@/api/Vehicle'

export default {
  data() {
    return {
      total: 1, // 总数据
      // 表格数据请求参数
      tableParams: {
        page: 1,
        pageSize: 10
      },
      licensePlate: '', // 车牌号码
      workStatus: null, // 状态
      truckTypeIdList: [], // 车辆类型列表
      truckTypeId: null, // 车辆类型id
      tableData: [], // 表格数据数组
      workNum: 0, // 可用数量
      stopNum: 0, // 停用数量
      modelForm: {
        truckTypeId: null, // 车辆类型Id
        deviceGpsId: '', // GPS设备id
        licensePlate: '' // 车牌号码
      },
      rules: {
        truckTypeId: [
          { required: true, message: '车辆类型不能为空', trigger: 'blur' }
        ],
        deviceGpsId: [
          { required: true, message: 'GPS设备id不能为空', trigger: 'blur' }
        ],
        licensePlate: [
          { required: true, message: '车牌号码不能为空', trigger: 'blur' },
          {
            pattern:
              /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9挂学警港澳]$/,
            message: '请输入正确格式的车牌号',
            trigger: 'blur'
          }
        ]
      },
      showDialog: false// 新增车型模态弹框状态
    }
  },
  async created() {
    // 获取车辆列表
    this.getVehicleList()
    // 获取车辆类型列表
    this.getTruckTypeIdList()
    // 获取车辆状态数据
    const res = await getCount()
    // console.log(res.data)
    this.workNum = res.data['1']
    this.stopNum = res.data['0']
  },
  methods: {
    // 获取表格数据
    async getVehicleList() {
      const result = await getVehicleList(this.tableParams)
      // console.log(result)
      // console.log(result.data.counts)
      this.total = Number(result.data.counts)
      // console.log(this.total)
      this.tableData = result.data.items
      // console.log(this.tableData)
    },
    // 获取车辆类型列表
    async getTruckTypeIdList() {
      const res = await getTruckTypeIdList()
      // console.log(res.data)
      this.truckTypeIdList = res.data
    },
    // 分页器
    handleSizeChange(val) {
      // console.log(val)
      this.tableParams.pageSize = val + ''
      this.getVehicleList()
    },
    handleCurrentChange(val) {
      // console.log(val)
      this.tableParams.page = val + ''
      this.getVehicleList()
    },
    // 搜索
    async btnSearch() {
      this.tableParams = {
        ...this.tableParams,
        truckTypeId: this.truckTypeId,
        licensePlate: this.licensePlate
      }
      // console.log(this.tableParams)
      await this.getVehicleList(this.tableParams)
      // this.$message.success('搜索成功')
    },
    // 重置搜索框
    reset() {
      this.truckTypeId = ''
      this.licensePlate = ''
    },
    // 按需搜索---全部
    all() {
      // console.log('全部')
      this.getVehicleList()
    },
    // 按需搜索---可用
    async workingTrucks(workStatus) {
      // console.log('可用', workStatus)
      const res = await getVehicleList({ ...this.tableParams, workStatus })
      // console.log(res.data)
      this.tableData = res.data.items
      this.total = +res.data.counts
    },
    // 按需搜索---停用
    async unWorkingTrucks(workStatus) {
      // console.log('停用', workStatus)
      const res = await getVehicleList({ ...this.tableParams, workStatus })
      // console.log(res.data)
      this.tableData = res.data.items
      this.total = +res.data.counts
    },
    // 计算序号
    indexMethod(index) {
      return calItemNum(
        index,
        this.tableParams.page,
        this.tableParams.pageSize
      )
    },
    // 新增车辆
    add() {
      // console.log('新增车辆')
      this.showDialog = true
    },
    // 提交新增表单
    async confirm() {
      await this.$refs.modelForm.validate()
      // console.log('验证成功')
      if (this.$refs.modelForm) {
        this.$message.warning('演示数据不允许修改')
        return
      }

      await addVehicle(this.modelForm)
      this.$message.success('新增成功')
      this.close()
    },
    // 停用
    stop(id) {
      console.log('停用', id)
      this.$message.success('配置成功')
    },
    // 配置司机
    update(id) {
      console.log('配置司机', id)
      this.$message.success('配置成功')
    },
    close() {
      // 重置表单
      this.$refs.modelForm.resetFields()
      // 关闭弹窗
      this.showDialog = false
    }
  }
}
</script>

<style scoped lang="scss">
.carModels {
  background-color: #eee;
  height: 100vh;
  .container {
    margin: 20px auto;
    //版心尺寸
    //width: 1700px;

    .top {
      margin: 10px;
      background-color: #fff;
      padding: 10px;
      span {
        margin: 10px;
      }
      .el-input {
        margin: 10px;
      }
    }
    .middle {
      margin: 10px;
      background-color: #fff;
      .el-button {
        border: none;
        outline: none;
      }
    }
    .table {
      background-color: #fff;
      padding: 10px;
      margin: 10px;
    }
  }
}
</style>
